<template>
  <div class="container">
    <div class="loginBody" :style="{ backgroundImage: 'url(' + bg + ')' }">
      <!-- 顶部 -->
      <loginHeader
        :isShowType="isShowType"
        :activeIndex="activeIndex"
      ></loginHeader>
      <!-- 登录 -->
      <div class="loginMain">
        <div class="areaNameDomain">恩施州建设领域——</div>
        <div class="mapCon" id="mapCon">
          <img :src="mapPng" alt="" class="mapImg" :onerror="errorUrl" />
        </div>
        <!-- 登录 -->
        <div class="loginType">
          <div class="top">
            <ul class="clear">
              <li class="left fl" @click="loginForJC">
                <span>
                  <i class="icon iconfont iconjianguanbumen"></i>
                  监管端
                </span>
              </li>
              <li class="right fl">
                <ul class="clearfix">
                  <li class="projectEnter" @click="loginForXM">
                    <span>
                      <i class="icon iconfont iconxiangmuduan"></i>
                      项目端
                    </span>
                  </li>
                  <li class="bankEnter" @click="loginForBank">
                    <span>
                      <i class="icon iconfont iconyinhangduan"></i>
                      银行端
                    </span>
                  </li>
                  <!-- <li class="complainEnter" @click="toComplaintPublicity">
                                        <el-row>
                                            <el-col :span="11">
                                                <i class="icon iconfont icontousugongshi"></i>
                                            </el-col>
                                            <el-col :span="13" class="complaintWay">
                                                投诉通道
                                            </el-col>
                                        </el-row>
                                    </li> -->
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <loginFooter></loginFooter>
    </div>
  </div>
</template>

<script>
import loginHeader from '@/components/publicCom/loginHeader'
import loginFooter from '@/components/publicCom/loginFooter'
import common from '../../kits/common'

export default {
  name: 'loginFirst',
  components: {
    loginHeader,
    loginFooter,
  },
  data() {
    return {
      isShowType: true,
      activeIndex: '0',
      bg: require('../../../static/img/loginImg/loginBg.jpg'),
      mapPng: require('../../../static/img/loginImg/titleBg.png'),
      peopleBgImg: '',
      areaInfo: '',
      num: 0,
      pathname: '',
      errorUrl:
        'this.src="' +
        require('../../../static/img/loginImg/titleBg.png') +
        '"',
    }
  },
  created() {
    var pathname = window.location.pathname
    var ch = '/'
    this.pathname = pathname.replace(new RegExp(ch, 'g'), '')
    this.getAreaInfo()
    // this.bg = this.$store.state.areaInfoArr.mainBgImg;
    // this.mapPng = this.$store.state.areaInfoArr.mapImg;
    // this.peopleBgImg = this.$store.state.areaInfoArr.peopleBgImg;
  },
  mounted() {},
  methods: {
    getAreaInfo() {
      this.axios({
        method: 'post',
        url: 'api-f/onstage/get',
        data: {
          type: this.pathname,
        },
      }).then(
        (response) => {
          if (!response.data.hasError) {
            this.areaInfo = response.data.result
            this.bg = this.areaInfo.mainBgImg
            this.mapPng = this.areaInfo.mapImg
            this.peopleBgImg = this.areaInfo.peopleBgImg
            this.$store.state.areaInfoArr = response.data.result
            localStorage.setItem(
              'documentTitle',
              response.data.result.mainTopText
            )
            document.title = response.data.result.mainTopText
          } else {
          }
        },
        (response) => {}
      )
    },
    loginForJC() {
      this.$router.push({
        name: 'loginNext',
        query: {
          type: 'JC',
        },
      })
    },
    loginForQY(selectedName) {
      this.$router.push({
        name: 'loginNext',
        query: {
          type: 'QY',
        },
      })
    },
    loginForBank() {
      this.$router.push({
        name: 'loginNext',
        query: {
          type: 'BANK',
        },
      })
    },
    loginForXM() {
      this.$router.push({
        name: 'loginNext',
        query: {
          type: 'XM',
        },
      })
    },
    toComplaintPublicity() {
      var host = window.location.host
      var pathname = window.location.pathname
      var protocol = document.location.protocol
      //  this.$router.push("/common/complaintPublicity")
      window.open(
        protocol + '//' + host + pathname + '#/common/complaintPublicity',
        '_blank'
      )
    },
    toCreditPublicity() {
      var host = window.location.host
      var pathname = window.location.pathname
      var protocol = document.location.protocol
      //  this.$router.push("/common/creditPublicity")
      window.open(
        protocol + '//' + host + pathname + '#/common/creditPublicity',
        '_blank'
      )
    },
  },
}
</script>

<style scoped lang="less">
.container {
  /deep/ .topTitleBox {
    background: none;
  }
  /deep/ .topTitleBox .systemName,
  /deep/ .topTitleBox .img {
    display: none;
  }
  /deep/ .activeFl {
    float: left;
  }
  position: relative;
  height: 100%;
  width: 100%;
  .loginBody {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url('../../../static/img/loginImg/loginBg.jpg') no-repeat;
    // background-repeat: no-repeat;
    background-size: 100% 100%;
    .people {
      position: relative;
      height: 100%;
      width: 20%;
      float: left;
      img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
      }
    }
  }

  // 登录模块
  .loginMain {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    .areaNameDomain {
      position: absolute;
      font-size: 45px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 50px;
      left: 7%;
      top: -100px;
    }
    .mapCon {
      height: 100%;
      width: 58%;
      // margin-right: 6%;
      margin-left: 7%;
      float: left;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        vertical-align: top;
      }
    }
    .loginType {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 67%;
      float: left;
      height: 100%;
      width: 33%;
      color: #fff;
      text-align: center;
      font-size: 20px;
      i {
        display: block;
        font-size: 70px;
        margin-bottom: 10px;
      }
      span {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
      }
      .top {
        height: calc(100%);
        ul {
          height: 100%;
          .left {
            width: calc(40% - 10px);
            margin-right: 20px;
            height: 100%;
            // height: calc(150% + 2px);
            background: url('../../../static/img/loginImg/enterEs1.png')
              no-repeat;
            background-size: 100% 100%;
            font-size: 30px;
            position: relative;
            cursor: pointer;
            i {
              font-size: 84px;
            }
          }
          .right {
            width: calc(40% - 10px);
            height: 100%;
            li:nth-of-type(1),
            li:nth-of-type(2) {
              height: calc(50% - 5px);
              position: relative;
              cursor: pointer;
              i {
                font-size: 50px;
              }
            }
            li:nth-of-type(3) {
              float: left;
              width: 100%;
              // padding: 15px 30px;
              height: calc(28% - 5px);
              position: relative;
              cursor: pointer;
              i {
                font-size: 30px;
                padding-top: 12%;
                text-align: right;
                padding-right: 5%;
              }
              .complaintWay {
                text-align: left;
                font-size: 16px;
                padding-top: 7.5%;
                padding-left: 5%;
              }
            }
            .projectEnter {
              background: url('../../../static/img/loginImg/enterEs2.png')
                no-repeat;
              background-size: 100% 100%;
            }
            .bankEnter {
              background: url('../../../static/img/loginImg/enterEs3.png')
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }
            .complainEnter {
              background: url('../../../static/img/loginImg/enterEs4.png')
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }
          }
        }
        .clear:after {
          content: '';
          display: block;
          clear: both;
          height: 0;
          overflow: hidden;
          visibility: hidden; /*处理浏览器兼容;*/
        }
        .clear {
          zoom: 1; /*处理兼容*/
        }
      }
    }
  }
}

@media all and (min-width: 1024px) and (max-width: 1440px) {
  .areaNameDomain {
    font-size: 30px !important;
    top: -60px !important;
  }
  .complaintWay {
    font-size: 12px !important;
  }
  .container .loginMain .loginType {
    .left span {
      font-size: 20px;
    }
    .right span {
      font-size: 16px;
    }
  }
  .top {
    .iconjianguanbumen {
      font-size: 70px !important;
    }
    .iconxiangmuduan,
    .iconyinhangduan {
      font-size: 40px !important;
    }
    .icontousugongshi {
      font-size: 20px !important;
    }
  }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .container .loginMain .loginType {
    .left span {
      font-size: 18px;
    }
    .right span {
      font-size: 14px;
    }
  }
  .top {
    .iconjianguanbumen {
      font-size: 60px !important;
    }
    .iconxiangmuduan,
    .iconyinhangduan {
      font-size: 30px !important;
    }
    .icontousugongshi {
      font-size: 16px !important;
    }
  }
}
</style>
